<template>
  <span :class="[prefixCls, theme]" @click="toggleCollapsed">
    <MenuUnfoldOutlined v-if="getCollapsed" />
    <MenuFoldOutlined v-else />
  </span>
  <!-- <span :class="[theme]">
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        功能模块
        <DownOutlined />
      </a>
      <template #overlay>
        <a-layout class="nav-product-panel">
          <a-layout-content>
            <a-menu
              theme="dark"
              mode="horizontal"
              :style="{ lineHeight: '64px' }"
            >
              <a-menu-item key="1">nav 1</a-menu-item>
              <a-menu-item key="2">nav 2</a-menu-item>
              <a-menu-item key="3">nav 3</a-menu-item>
            </a-menu>
          </a-layout-content>
        
        </a-layout>
      </template>
    </a-dropdown>
  </span> -->
</template>
<script lang="ts">
  import { defineComponent } from "vue"
  import { DownOutlined } from "@ant-design/icons-vue"
  import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue"
  import { useMenuSetting } from "/@/hooks/setting/useMenuSetting"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { propTypes } from "/@/utils/propTypes"

  export default defineComponent({
    name: "HeaderTrigger",
    components: { MenuUnfoldOutlined, MenuFoldOutlined, DownOutlined },
    props: {
      theme: propTypes.oneOf(["light", "dark"]),
    },
    setup() {
      const { getCollapsed, toggleCollapsed } = useMenuSetting()
      const { prefixCls } = useDesign("layout-header-trigger")
      return { getCollapsed, toggleCollapsed, prefixCls }
    },
  })
</script>

<style lang="less">
  // .nav-product-panel{
  //   background: #04142c;
  //   height: inherit;
  //   max-height: calc(100vh - 68px);
  //   min-height: 500px;
  //   overflow: auto;
  //   box-sizing: border-box;

  //   max-width: calc(100vw - 142px);
  //   position: relative;
  //   margin-left: auto;
  //   min-width: 1100px;
  // }
</style>
